<template>
    <div class="user-page"> 
        <div class="head-box">
            <!-- 用户信息 -->
            <div class="user-box">
                <div class="user-head">
                    <p class="img-box">
                        <van-image
                        round
                        width="100%"
                        height="100%"
                        fit="cover"
                        :src="userInfo.wx_header" />
                    </p>
                </div>
                <div class="user-info">
                    <div class="name">{{userInfo.wx_nickname}}</div>  
                    <div class="vip-data">
                        <!-- <span class="vip-type">普通会员</span> -->
                        <span class="vip-id">ID:{{userInfo.id}}</span>
                    </div>  
                </div> 
            </div> 
        </div>
        <div style="margin-top:5px;">
            <van-cell value="我的课程" icon="completed" is-link  @click="jumpPage()"></van-cell>
            <van-cell value="打卡签到" icon="paid" is-link  @click="jumpPage()"></van-cell> 
        </div>  
    </div>
</template>

<script>
import * as api from './../../api/api'
export default {
    data(){
        return{ 
            userInfo:{},
        }
    },
    created(){
        this.userInfo=sessionStorage.getItem('userInfo')?JSON.parse(sessionStorage.getItem('userInfo')):{}; 
    },
    methods:{ 
        jumpPage(url){
            this.$dialog.alert({
                message: '敬请期待...'
            });
            // if(url){
            //     this.$router.push({name:url})
            // } 
        },
        
    },
    components:{ 

    }

}
</script>


<style scoped lang="scss">
.user-page{
    width:100%;
    height:100%;
    overflow: auto;
    .head-box{
        width:100%;
        padding:.8rem 0;
        background:#2B252C; 
        .user-box{
            position: relative;
            display: flex;
            align-items: center;
            .user-head{
                flex:0 0 2.666667rem;
                .img-box{
                    width:1.866667rem;
                    height:1.866667rem; 
                    margin:auto;
                    border:2px solid #fff;
                    border-radius: 50%;
                }
            }
            .user-info{
                flex:1;
                .name{
                    font-size:.48rem;
                    color:#fff;
                    font-weight: bold;
                }
                .vip-data{
                    margin-top:.266667rem;
                    .vip-type{
                        padding: .106667rem .26rem;
                        // background:#F3DB9D;
                        border:.013333rem solid #534D53;
                        color:#D3D2D3;
                        border-radius: .133333rem;
                    }
                    .vip-id{
                        margin-left:.266667rem;
                        color:#fff;
                    }
                }
            }
            .sign-box{
                position: absolute;
                right:0; 
                top:0; 
                padding:.4rem 0 .4rem .4rem;
            }
            .sign-in{ 
                height: .666667rem;
                line-height: .666667rem;
                border-top-left-radius: .333333rem; 
                border-bottom-left-radius: .333333rem;
                background:#F3DB9D;
                color:#333;
                padding:0 .28rem;
            }
        }
        .income{
            background:#fff;
            margin-top:.533333rem;
            .income-title{
                font-size:.4rem;
                color:#000;
                margin-bottom:.2rem;
            }
            .num{
                color:#000;
                font-weight: bold;
            }
        }
        
    }
    .menu-group{
        margin:.4rem; 
        padding:.4rem 0;
        background:#fff;
        border-radius: .2rem;
        .group-name{
            padding:0 .4rem;
            font-weight: bold;
            font-size:.4rem; 
            margin-bottom:.4rem;
        }
        .groun-content{
            .icon{
                width:1.2rem;
                height:1.2rem; 
                margin:auto;
            }
            .name{
                margin-top:.266667rem;
                font-size:.4rem;
            }
        }
    }
       
}

</style>
